<template>
  <div class="regist">
    <div class="return-button">
      <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
    </div>
    <div class="container">
      <div class="payment-info">
        <div class="payment-method">
          <img src="../assets/img/alipay.jpg" alt="收款码1" class="qr-code" />
          <p class="payment-amount">您需支付 {{ paymentAmount }} 元</p>
        </div>
        <div class="payment-method">
          <img src="../assets/img/wechatpay.jpg" alt="收款码2" class="qr-code" />
          <p class="payment-amount">您需支付 {{ paymentAmount }} 元</p>
        </div>
      </div>
      <div class="login-wrap">
        <el-form
          class="login-form"
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-position="right"
          label-width="100px"
        >
          <h2 style="margin-bottom: 20px; text-align: center;">欢迎加入我们的Family</h2>
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <el-form-item label="姓名" prop="name">
                <el-input
                  type="text"
                  v-model="ruleForm.name"
                  prefix-icon="el-icon-user-solid"
                  class="custom-input"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="ruleForm.gender" placeholder="请选择性别" class="custom-input">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="6">
              <el-form-item label="生日" prop="birthday">
                <el-date-picker
                  v-model="ruleForm.birthday"
                  type="date"
                  placeholder="选择生日"
                  class="custom-input"
                  @change="handleDateChange('birthday',$event)"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <el-form-item label="电话号码" prop="phone">
                <el-input
                  type="text"
                  v-model="ruleForm.phone"
                  prefix-icon="el-icon-phone"
                  class="custom-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="6">
              <el-form-item label="注册日期" prop="registerDate">
                <el-date-picker
                  v-model="ruleForm.registerDate"
                  type="date"
                  placeholder="选择注册日期"
                  class="custom-input"
                  @change="handleDateChange('registerDate',$event)"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <el-form-item label="卡种" prop="cardType">
                <el-select v-model="ruleForm.cardType" placeholder="请选择卡种" class="custom-input" @change="calculateExpiryDate">
                  <el-option label="次卡" value="次卡"></el-option>
                  <el-option label="季卡" value="季卡"></el-option>
                  <el-option label="月卡" value="月卡"></el-option>
                  <el-option label="年卡" value="年卡"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="6">
              <el-form-item label="到期时间" prop="expiryDate">
                <el-date-picker
                  v-model="ruleForm.expiryDate"
                  type="date"
                  placeholder="到期日期"
                  class="custom-input"
                  disabled
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  prefix-icon="el-icon-lock"
                  class="custom-input"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              class="login-button"
              type="warning"
              @click="handleRegist"
            >注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      ruleForm: {
        name: "",
        gender: "",
        birthday: null,
        phone: "",
        registerDate: null,
        cardType: "",
        expiryDate: null,
        password: ""
      },
      paymentAmount: 0 // 添加支付金额字段
    };
  },
  methods: {
    handleRegist() {
      if (!this.ruleForm.name) {
        this.$message.error("姓名不能为空");
        return;
      }
      if (!this.ruleForm.birthday) {
        this.$message.error("生日不能为空");
        return;
      }
      if (!this.ruleForm.registerDate) {
        this.$message.error("注册日期不能为空");
        return;
      }

      const formData = {
        name: this.ruleForm.name,
        gender: this.ruleForm.gender,
        birthday: this.formatDateToYYYYMMDD(this.ruleForm.birthday),
        phone: this.ruleForm.phone,
        registerDate: this.formatDateToYYYYMMDD(this.ruleForm.registerDate),
        cardType: this.ruleForm.cardType,
        expiryDate: this.formatDateToYYYYMMDD(this.ruleForm.expiryDate),
        password: this.ruleForm.password
      };

      axios.post('/api/members/register', { member: formData, password: formData.password })
        .then(response => {
          this.$message({
            type: "success",
            message: "注册信息已提交",
          });
          this.$router.push('/list');
        })
        .catch(error => {
          console.error('注册失败:', error);
          this.$message.error("注册失败");
        });
    },
    formatDateToYYYYMMDD(date) {
      if (!date) return null;
      return dayjs(date).format('YYYY-MM-DD');
    },
    handleDateChange(field, value) {
      this.ruleForm[field] = value ? this.formatDateToYYYYMMDD(value) : null;
    },
    calculateExpiryDate() {
      if (!this.ruleForm.registerDate || !this.ruleForm.cardType) return;
      const daysMapping = {
        次卡: 365,
        季卡: 93,
        月卡: 31,
        年卡: 396
      };
      const registerDate = dayjs(this.ruleForm.registerDate);
      const days = daysMapping[this.ruleForm.cardType];
      const expiryDate = registerDate.add(days, 'day');
      this.ruleForm.expiryDate = expiryDate.format('YYYY-MM-DD');
      this.calculatePaymentAmount(); // 计算支付金额
    },
    calculatePaymentAmount() {
      const priceMapping = {
        次卡: 999,
        季卡: 599,
        月卡: 199,
        年卡: 1999
      };
      this.paymentAmount = priceMapping[this.ruleForm.cardType] || 0;
    },
    goBack() {
      this.$router.push('/member');
    }
  },
  watch: {
    'ruleForm.cardType': function(newVal) {
      this.calculatePaymentAmount(); // 监听卡种变化，动态计算支付金额
    }
  }
};
</script>

<style scoped>
.regist {
  background-color: #324152;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.return-button {
  position: absolute;
  top: 20px;
  right: 20px;
}
.container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  margin: auto;
}
.payment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}
.payment-method {
  text-align: center;
  margin-bottom: 20px;
}
.qr-code {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}
.payment-amount {
  font-weight: bold;
  color: #fff;
}
.login-wrap {
  flex: 2;
  padding: 20px;
}
.login-form {
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
}
.login-form .login-button {
  width: 100%;
}
</style>